@import '@/lib/reset.scss';
*{padding: 0;margin: 0;list-style: none;}
.toplist-box {
    @include rect(1220px, 500px);
    // background: #ff0;
    @include margin(0 auto);
    div:nth-child(1) div{
        background-image: url(./img/0.jpg)
    }
    div:nth-child(2) div{
        background-image: url(./img/1.jpg)
    }
    div:nth-child(3) div{
        background-image: url(./img/2.jpg)
    }
    div:nth-child(4) div{
        background-image: url(./img/3.jpg)
    }
    div:nth-child(5) div{
        background-image: url(./img/4.jpg)
    }
    .toplist-out {
        div {
            @include rect(224px, 500px);
            float: left;
            @include margin(0 10px);
            // background: #0ff;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p {
                @include rect(66px, 22px);
                @include margin(0 0 9px);
                // background: #00f;
                font-size: 20px;
                line-height: 22px;
                @include text-color(#fff);
            }
            h2 {
                @include rect(104px, 36px);
                line-height: 36px;
                font-size: 26px;
                color: #fff;
                text-align: center
            }
            b {
                @include rect(49px, 49px);
                display: block;
                @include margin(0 0 18px);
                cursor: pointer;
                position: relative;

                .iconfont {
                    @include rect(49px, 49px);
                    line-height: 49px;
                    color: #fff;
                    text-align: center;                   
                }
                .icon-move {
                   font-size: 40px;
                   display: block;
                //    display: none;
                }
                .icon-videofill {
                    @include rect(49px, 49px);
                    // background: #f00;
                    position: absolute;
                    top: 0;
                    left: 0;
                    font-size: 45px;
                    // display: none;
                    opacity: 0;
                    transition: opacity 1s;
                    -webkit-transition: opacity 1s; /* Safari */
                }
            }
        }
        &:hover .icon-move{
            display: none;
        }
        &:hover .icon-videofill{
            opacity: 1;
        }
        .toplist-ul {
            @include rect(164, 222px);
            @include margin(0 auto);
            // background: #f0f;
            li {
                @include rect(164px, 74px);
                @include text-color(#fff);
                font-weight: 100;
                em {
                    @include rect(15px, 74px);
                    float: left;
                    text-align: center;
                    line-height: 23px;
                    cursor: pointer;
                }
                p {
                    @include rect(149px, 47px);
                    float: left;
                    font-size: 16px;
                    line-height: 23px;
                    b {
                        @include rect(149px, 23px);
                        display: block;
                        @include margin(0 0);
                        cursor: pointer;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis
                    }
                }
            }
        }
        
    } 
}
